<template>
  <div class="wsa-box">
    <el-container>
      <el-header>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="人员搜索：">
            <el-input v-model="formInline.user" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit" icon="el-icon-search"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
      </el-header>
      <el-main>
        <!-- 分割线------------------------------------- -->
        <el-button
          type="warning"
          icon="el-icon-circle-plus-outline"
          class="btn-add"
          @click.native="addfn"
        >
          新建
        </el-button>
        <el-table
          :data="alldata.currentPageRecords"
          style="width: 100%"
          :stripe="true"
        >
          <el-table-column
            type="index"
            label="序号"
            width="100px"
          ></el-table-column>
          <el-table-column prop="userName" label="人员名称" width="260">
          </el-table-column>
          <el-table-column prop="regionName" label="归属区域" width="270">
          </el-table-column>
          <el-table-column prop="role.roleName" label="角色" width="260">
          </el-table-column>
          <el-table-column prop="mobile" label="联系电话" width="250">
          </el-table-column>
          <el-table-column label="操作" align="center">
            <!-- Scoped slot 作用域插槽 带有数据的插槽 -->
            <!-- 通过 Scoped slot 可以获取到 row,column,$index 和 store
          (table 内部的状态管理)的数据，用法参考demo -->
            <!-- <template #default="scope">
            {{ scope.$index }} -- {{ scope.row }}
          </template> -->
            <template #default="scope">
              <el-button type="text" @click="preview(scope.row.id)"
                >修改</el-button
              >
              <el-tooltip class="item" effect="dark" content="谨慎！删除无法恢复" placement="top-start">
              <el-button
                type="text"
                @click="showEdit(scope.row.id)"
                class="btn-del"
                >删除</el-button
              ></el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分割-------------------------- -->
        <div class="block">
          <el-pagination
            @next-click="nextpage"
            @prev-click="previouspage"
            prev-text="上一页"
            next-text="下一页"
            :page-size="+alldata.pageSize"
            layout="total, prev, next"
            :total="+alldata.totalCount"
          >
          </el-pagination>
          <span class="yema"
            >第{{ +alldata.pageIndex }}/{{ +alldata.totalPage }}页</span
          >
        </div>
      </el-main>
    </el-container>
    <!--  -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="gbbb">
      <el-form :model="form" :rules="rules" ref="numberValidateForm">
        <el-form-item
          label="人员名称:"
          :label-width="formLabelWidth"
          prop="name"
        >
          <el-input
            v-model="form.name"
            autocomplete="off"
            maxlength="5"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="角色:" :label-width="formLabelWidth" prop="region">
          <el-select v-model="form.region">
            <el-option label="运营员" value="2"></el-option>
            <el-option label="维修员" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="联系电话:"
          :label-width="formLabelWidth"
          prop="call"
        >
          <el-input
            v-model="form.call"
            autocomplete="off"
            maxlength="11"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item
          label="负责区域:"
          :label-width="formLabelWidth"
          prop="area"
        >
          <el-select v-model="form.area">
            <el-option
              v-for="item in dqlist"
              :key="item.id"
              :label="item.name ? item.name : item.id"
              :value="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="头像:" :label-width="formLabelWidth" prop="head">
          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <span class="head-text">支持扩展名:jpg、png,文件不得大于100kb</span>
        </el-form-item>
        <el-form-item label="状态:" prop="type" :label-width="formLabelWidth">
          <el-checkbox-group v-model="form.user">
            <el-checkbox label="是否启用" name="type"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel('numberValidateForm')" class="change-cancel"
          >取 消</el-button
        >
        <el-button type="primary" class="change-confirm" @click="submission"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getPersonnel,
  Personneladd,
  getrole,
  changepeople,
  getlist,
  delpeople
} from '@/api/personnel'
export default {
  name: 'personnel-page',
  async created() {
    const res = await getPersonnel(this.pageIndex)
    console.log(res)
    this.alldata = res
    console.log(this.alldata.totalCount)
  },
  data() {
    return {
      dqlist: '', // 地区列表
      ryid: '',
      pageIndex: 1,
      title: '',
      formInline: {
        user: ''
      },
      form: {
        imageUrl: '',
        name: '', // 人员名称
        region: '', // 角色
        call: '', // 联系电话
        area: '', // 负责区域
        user: true // 状态 是否启用
      },
      dialogFormVisible: false,
      formLabelWidth: '120px',
      currentPage4: 4,
      alldata: '', // 所有数据
      rules: {
        name: [{ required: true, message: '请输入', trggier: 'blur' }],
        region: [{ required: true, message: '请输入', trggier: 'change' }],
        call: [
          { required: true, message: '请输入', trggier: 'change' },
          {
            pattern: /^(?:(?:\+|00)86)?1\d{10}$/,
            message: '请输入正确的手机号',
            trggier: 'blur'
          }
        ],
        area: [{ required: true, message: '请输入', trggier: 'blur' }],
        head: [{ required: true, message: '请上传', trggier: 'blur' }]
      }
    }
  },
  methods: {
    async showEdit(id) {
      // 删除
      // -------------------------------------
      console.log(id)
      this.ryid = id
      const res = await delpeople(id)
      console.log(res)
      const res1 = await getPersonnel(this.pageIndex)
      console.log(res1)
      this.alldata = res1
    },
    gbbb() {
      // 清空
      this.$refs.numberValidateForm.clearValidate()
      this.$refs.numberValidateForm.resetFields()
      this.form.imageUrl = ''
    }, // 关闭弹窗
    cancel(formName) {
      this.dialogFormVisible = false
      this.$refs[formName].resetFields()
      this.form.imageUrl = ''
    },
    async handleAvatarSuccess(res, file) {
      this.form.imageUrl = URL.createObjectURL(file.raw)
      console.log(this.form.imageUrl)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt100Kb = file.size < 100000

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt100Kb) {
        this.$message.error('上传头像图片大小不能超过 100Kb!')
      }
      return isJPG && isLt100Kb
    },
    // 点确定
    async submission() {
      if (this.title === '新增人员') {
        const data = {
          image: this.form.imageUrl,
          mobile: this.form.call,
          regionId: this.$store.state.user.userInfo.regionId,
          regionName: this.form.area,
          roleId: this.form.region,
          status: this.form.user,
          userName: this.form.name
        }
        console.log(data)
        const res = await Personneladd(data)
        console.log(res)
        this.$message.success('新建成功')
      } else {
        // 点确定编辑修改
        const data = {
          image: this.form.imageUrl,
          mobile: this.form.call,
          regionId: this.$store.state.user.userInfo.regionId,
          regionName: this.form.area,
          roleId: `${this.form.region === '运营员' ? 2 : 3}`,
          status: this.form.user,
          userName: this.form.name
        }
        const res2 = await changepeople(this.ryid, data)
        console.log(res2)
        this.$message.success('修改成功')
      }

      // 重新渲染
      const res1 = await getPersonnel(this.pageIndex)
      console.log(res1)
      this.alldata = res1
      this.dialogFormVisible = false
    },
    // 上一页
    async previouspage() {
      this.pageIndex--
      const res = await getPersonnel(this.pageIndex)
      console.log(res)
      this.alldata = res
    },
    // 下一页
    async nextpage() {
      this.pageIndex++
      const res = await getPersonnel(this.pageIndex)
      console.log(res)
      this.alldata = res
    },
    async addfn() {
      this.dialogFormVisible = true
      this.title = '新增人员'
      const res222 = await getlist()
      console.log(res222)
      this.dqlist = res222.currentPageRecords
      console.log(this.dqlist)
    },
    async onSubmit() {
      const res = await getPersonnel(this.pageIndex, this.formInline.user)
      console.log(res)
      this.alldata = res
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    async preview(id) {
      this.dialogFormVisible = true
      this.title = '编辑人员'
      // 编辑修改
      const res2 = await getrole()
      console.log(res2)
      console.log(this.alldata)
      const xg = this.alldata.currentPageRecords.find((item) => item.id === id)
      console.log(xg)
      console.log(xg)
      const res222 = await getlist()
      console.log(res222)
      this.dqlist = res222.currentPageRecords
      console.log(this.dqlist)
      this.form.name = xg.userName
      this.form.call = xg.mobile
      this.form.user = xg.status
      this.form.imageUrl = xg.image
      this.form.area = xg.regionName
      this.form.region = `${xg.roleId === 2 ? '运营员' : '维修员'}`
      this.ryid = id
    }
  }
}
</script>

<style scoped lang="scss">
.el-pagination {
  margin-top: 20px;
}
::v-deep .btn-next {
  float: right;
  border: 1px solid #ccc;
  border-radius: 3px;
  background-color: #d5ddf8 !important;
}
::v-deep .btn-prev {
  margin-left: 1170px !important;
  border: 1px solid #ccc;
  border-radius: 3px;
  background-color: #d5ddf8 !important;
}
::v-deep .el-pagination__total {
  color: #ccc;
  font-size: 14px !important;
}
::v-deep .el-pagination__total::after {
  content: '记录';
}
::v-deep .el-input .el-input__count {
  margin-right: 70px;
}
::v-deep .el-dialog {
  width: 630px;
  border-radius: 10px;
}
::v-deep .el-input__inner {
  width: 396px;
}
.btn-add {
  background-color: #ff6d29;
  border: 1px solid #ff6d29;
}
.head-text {
  color: #ccc;
  font-size: 14px;
}
.btn-del {
  color: red;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 76px;
  height: 76px;
  line-height: 76px;
  text-align: center;
  background-color: #f3f6fb;
  border: 1px dashed #d8dde3;
}
.avatar-uploader-icon:hover {
  border: 1px dashed #818693;
}
.avatar {
  width: 76px;
  height: 76px;
  display: block;
  border: 1px dashed #d8dde3;
}
.dialog-footer {
  text-align: center;
  .change-cancel {
    margin-right: 30px;
    background-color: #fbf4f0;
  }
  .change-confirm {
    background-color: #ff6d29;
    border: 1px solid #ff6d29;
  }
}
.yema {
  display: inline-block;
  margin-left: 100px;
  transform: translateY(-27px);
  font-size: 14px;
  color: #ccc;
}
</style>
